<template>
  <div class="layout">
    <Layout siderFixed :siderCollapsed="siderCollapsed">
      <Sider theme="dark">
        <transition name="fade">
          <div class="layout-logo">
            <p v-if="!siderCollapsed">Wine For You</p>
            <img v-else :src="logoSrc" style="width: 44px; height: 44px" />
          </div>
        </transition>
        <Menu
          :accordion="true"
          :inlineCollapsed="siderCollapsed"
          style="margin-top: 20px"
          class="h-menu-dark"
          :datas="menuDatas"
          @click="trigger"
          nativeLink
        ></Menu>
      </Sider>
      <Layout>
        <HHeader theme="white">
          <div style="width: 100px; float: left">
            <Button
              icon="h-icon-menu"
              size="l"
              noBorder
              style="font-size: 20px"
              @click="checkSlider"
            ></Button>
          </div>
          <div style="float: right; padding-right: 80px">
            <Button
              icon="h-icon-home"
              size="l"
              @click="gotoWeb"
              noBorder
            ></Button>
            <Button
              icon="h-icon-user"
              size="l"
              @click="changePassword"
              noBorder
            ></Button>
            <Button
              icon="iconfont icon-power"
              size="l"
              noBorder
              @click="logout"
            ></Button>
          </div>
        </HHeader>
        <Head> </Head>
        <Content style="padding: 30px 0 30px 0">
          <div
            style="
              background: rgb(255, 255, 255);
              padding: 24px;
              height: 100%;
              min-height: 84vh;
              text-align: left;
            "
          >
            <router-view></router-view>
          </div>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import logoSrc from "@/assets/logo.png";
import { menuDatas } from "@/config/menu.js";
export default {
  name: "layout",
  data() {
    return {
      logoSrc,
      menuDatas,
      siderCollapsed: false,
    };
  },

  methods: {
    getmenuDatas() {
      this.menuDatas = menuDatas;
    },
    // meun跳转
    trigger(data) {
      if (data.children.length > 0) return;
      this.$router.push({ path: data.key });
    },
    // 切换显示
    checkSlider() {
      this.siderCollapsed = !this.siderCollapsed;
    },
    // 前往网站首页
    gotoWeb() {
      window.open("https://www.wineforyou.cn");
    },
    // 修改密码
    changePassword() {
      this.$router.push("changePassWord");
    },
    // 退出
    logout() {
      if (window.localStorage.getItem("token")) {
        this.$post("/api/logout", {
          token: window.localStorage.token,
        });
      }
      window.localStorage.removeItem("token");
      this.$router.push("/login");
    },
  },
  mounted() {
    this.getmenuDatas();
  },
  watch: {
    "$route.fullPath": function (newPath) {
      if (newPath === "/") {
        this.$router.push("/home");
        // 缺陷：第一次直接进还是会404
        // 解决：在router/index.js中直接判断router.beforeEach((to, from, next) 如果to 等于/ 直接跳转 感觉这里也没必要了
      }
    },
  },
};
</script>
<style lang="less">
.layout {
  .h-layout {
    background: #f0f2f5;
    .h-layout-header {
      .h-btn {
        i {
          font-size: 20px;
        }
      }
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    font-size: 12px;
    transition: opacity 0.3s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
  .layout-logo {
    text-align: center;
    height: 44px;
    background: rgba(255, 255, 255, 0.4);
    line-height: 44px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 16px 0;
  }
}
</style>